<template>
  <div class="settings-container">

        <h1>   个人信息设置    </h1>


    <!-- 个人信息设置 -->
    <div class="settings-section glass-card">
      <h2>个人信息</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="userInfo.username" placeholder="输入用户名">
        </div>
        <div class="form-group">
          <label for="age">年龄</label>
          <input type="number" id="age" v-model.number="userInfo.age" placeholder="输入年龄" min="0">
        </div>
        <div class="form-group">
          <label for="height">身高 (cm)</label>
          <input type="number" id="height" v-model.number="userInfo.height" placeholder="输入身高" min="0">
        </div>
        <div class="form-group">
          <label for="gender">性别</label>
          <select id="gender" v-model="userInfo.gender">
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="other">其他</option>
          </select>
        </div>
      </div>
      <button class="btn-primary" @click="saveUserInfo">保存信息</button>
    </div>

    <!-- 目标设置 -->
    <div class="settings-section glass-card">
      <h2>健身目标</h2>
      <div class="form-group">
        <label for="fitness-goal">主要目标</label>
        <select id="fitness-goal" v-model="fitnessGoal">
          <option value="lose_weight">减脂</option>
          <option value="gain_muscle">增肌</option>
          <option value="maintain">维持体型</option>
          <option value="improve_fitness">提高体能</option>
        </select>
      </div>
      <div class="form-grid">
        <div class="form-group">
          <label for="daily-calories">每日热量目标 (kcal)</label>
          <input type="number" id="daily-calories" v-model.number="calorieGoal" placeholder="0" min="0">
        </div>
        <div class="form-group">
          <label for="weekly-workouts">每周训练次数</label>
          <input type="number" id="weekly-workouts" v-model.number="weeklyWorkoutGoal" placeholder="0" min="0">
        </div>
      </div>
      <button class="btn-primary" @click="saveGoals">保存目标</button>
    </div>

    <!-- 应用设置 -->
    <div class="settings-section glass-card">
      <h2>应用设置</h2>

      <div class="setting-item">
        <span class="setting-label">通知提醒</span>
        <label class="toggle-switch">
          <input type="checkbox" v-model="notificationsEnabled">
          <span class="toggle-slider"></span>
        </label>
      </div>
      <div class="setting-item">
        <span class="setting-label">自动同步数据</span>
        <label class="toggle-switch">
          <input type="checkbox" v-model="autoSyncEnabled">
          <span class="toggle-slider"></span>
        </label>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useSettingsStore } from '@/stores/settings';
import { useUserStore } from '@/stores/user';

const settingsStore = useSettingsStore();
const userStore = useUserStore();

// 用户信息
const userInfo = ref({
  username: '',
  age: null,
  height: null,
  gender: '男'

});

// 健身目标
const fitnessGoal = ref('lose_weight');
const calorieGoal = ref(2000);
const weeklyWorkoutGoal = ref(3);

// 应用设置
const darkMode = ref(false);
const notificationsEnabled = ref(true);
const autoSyncEnabled = ref(true);

// 初始化
onMounted(() => {
  // 从store加载数据
  loadUserInfo();
  loadSettings();
  loadGoals();
});

// 加载数据
const loadUserInfo = () => {
  const info = userStore.getUserInfo();
  if (info) {
    userInfo.value = info;
  }
};

const loadSettings = () => {
  const settings = settingsStore.getSettings();
  darkMode.value = settings.darkMode || false;
  notificationsEnabled.value = settings.notificationsEnabled !== false;
  autoSyncEnabled.value = settings.autoSyncEnabled !== false;

  // 应用深色模式
  if (darkMode.value) {
    document.documentElement.classList.add('dark');
  }
};

const loadGoals = () => {
  const goals = settingsStore.getFitnessGoals();
  if (goals) {
    fitnessGoal.value = goals.type || 'lose_weight';
    calorieGoal.value = goals.calorieGoal || 2000;
    weeklyWorkoutGoal.value = goals.weeklyWorkoutGoal || 3;
  }
};

// 保存设置
const saveUserInfo = () => {
  userStore.saveUserInfo(userInfo.value);
  alert('个人信息已保存');
};

const saveGoals = () => {
  settingsStore.saveFitnessGoals({
    type: fitnessGoal.value,
    calorieGoal: calorieGoal.value,
    weeklyWorkoutGoal: weeklyWorkoutGoal.value
  });
  alert('健身目标已保存');
};

const toggleDarkMode = () => {
  if (darkMode.value) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
  settingsStore.saveSettings({
    darkMode: darkMode.value,
    notificationsEnabled: notificationsEnabled.value,
    autoSyncEnabled: autoSyncEnabled.value
  });
};

// 数据管理
const exportData = () => {
  // 模拟数据导出
  alert('数据导出功能即将上线');
};

const confirmClearData = () => {
  if (confirm('确定要清除所有数据吗？此操作不可恢复！')) {
    clearAllData();
  }
};

const clearAllData = () => {
  // 清除所有store数据
  userStore.clearData();
  settingsStore.clearData();
  // 重新加载初始值
  loadUserInfo();
  loadSettings();
  loadGoals();
  alert('所有数据已清除');
};
</script>

<style scoped>
.settings-container {
  padding: var(--spacing-lg);
  max-width: 100%;
  margin: 230px auto 0;
  padding-bottom: 92px;

}

.page-header {
  margin-bottom: var(--spacing-lg);
}

.settings-section {
  margin-bottom: var(--spacing-lg);
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.settings-section:nth-child(1) { animation-delay: 0.1s; }
.settings-section:nth-child(2) { animation-delay: 0.2s; }
.settings-section:nth-child(3) { animation-delay: 0.3s; }
.settings-section:nth-child(4) { animation-delay: 0.4s; }

.card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

h1 {
  color: var(--gray-800);
}
h2 {
  color: white;
}

h2 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--primary);
  border-radius: var(--radius-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--white);
  transition: border-color var(--transition-normal);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
  outline: none;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--gray-100);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  color: white;
  font-weight: var(--font-weight-medium);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: var(--transition-normal);
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: var(--transition-normal);
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--primary);
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px var(--primary);
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.data-management-buttons {
  display: flex;
  gap: var(--spacing-md);
}

/* 按钮样式已在全局CSS中定义，此处仅保留特定覆盖 */
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

.btn-danger {
  background-color: var(--error);
}

.btn-danger:hover {
  background-color: var(--error-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 400px) {
  .settings-container {
  padding: 3.2vw;
  margin-top: 21.33vw;
  overflow-x: hidden;
}
  .form-grid {
    grid-template-columns: 1fr;
  }
  .glass-card {
    padding: 1rem;
  }
  .form-group {
  margin-bottom: 3.2vw;
}

.form-group input, .form-group select {
  max-width: 100%;
  padding: 2.56vw;
  font-size: 3.63vw;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}
  h1, h2 {
    font-size: 1.25rem;
  }
}
</style>